<template>
  <el-upload
    v-model:file-list="fileList"
    drag
    action=""
    :limit="multiple ? 9999999 : 1"
    :multiple="multiple"
    :auto-upload="false"
    :show-file-list="showFileList"
    :accept="accept"
    :on-change="handleChange"
  >
    <el-icon class="el-icon--upload">
      <upload-filled />
    </el-icon>
    <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
    <template #tip>
      <div class="el-upload__tip text-red">
        {{ tip }}
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { computed, ref, unref } from 'vue'
import type { UploadFile, UploadFiles } from 'element-plus'

const emits = defineEmits(['after'])
const props = defineProps({
  accept: {
    type: String,
  },
  showFileList: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
})

const tip = computed(() => {
  return unref(props).multiple
    ? `limit 10 ${unref(props).accept} file`
    : `limit 1 ${unref(props).accept} file, new file will cover the old file`
})

const fileList = ref<UploadFile[]>([])
const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  emits('after', uploadFile, uploadFiles)
}
</script>

<style scoped lang="less">
.text-red {
  color: red;
  margin-bottom: 7px;
}
</style>
